<template>
  <view class="layout-group-content-item flex" :style="[customStyle]">
    <view class="item-top flex row-between col-center">
        <view>
            <view class="flex col-center">
                <view class="layout-group-content-item-left" v-if="itemObj.memberList && itemObj.memberList.length">
                    <block v-if="itemObj.memberList.length > 2">
                        <image :src="imageItem.dyPortrait || '/static/icon/default_dyhead.jpg'" v-for="imageItem in itemObj.memberList.slice(0,2)" :key="imageItem.id"/>
                    </block>
                    <block>
                        <image :src="temObj.memberList[0].dyPortrait || '/static/icon/default_dyhead.jpg'"/>
                        <view class="head-image-three-other col-center row-center" v-if="itemObj.remainNum >= 1">
                            <image src="/static/detail/icon_tuan_add@3x.png" />
                        </view>
                    </block>
                    <view class="head-image-three col-center row-center" v-if="itemObj.memberList > 2 &&itemObj.remainNum > 0">
                        <image :src="itemObj.memberList.length > 2 ? '/static/detail/icon_tuan_more@3x.png' : '/static/detail/icon_tuan_add@3x.png'" />
                    </view>
                </view>
                <view class="layout-group-content-item-middle">
                    <view class="text-one">还差<text>{{ itemObj.remainNum || 0 }}</text>人拼成</view>
                    <view class="text-two">剩余
                        <ECountdown 
                            background="#fff"
                            :timestamp="itemObj.groupTimeLength/1000" 
                            :showDays="true"
                            :separatorSize="18"
                            separatorColor="#999"
                            color="#999"
                            fontSize="20rpx"
                            height="24"
                            :dayIsZh="true"
                        />
                    </view>
                </view>
            </view>
            <view class="item-bottom flex col-center">
                <image src="/static/detail/icon_xqy_time@3x.png"/>
                <text>{{itemObj.exploreTimeStr || ''}}</text>
            </view>
        </view>
        
        <view class="layout-group-content-item-right">
            <block v-if="productInfo.tdSeekApplyId === -1">
                <DistributionTandian 
                    :detailInfo="detailInfo"
                    :productInfo="productInfo"
                    :isTandianFull="isTandianFull"
                    :isExpire="isExpire"
                    :isSingle="1"
                    :applyNeedObj="applyNeedObj"
                />
            </block>
        </view>
    </view>
  </view>
</template>

<script>
import ECountdown from '../ECountDown'
import DistributionTandian from '@/components/distributionTandian'
export default {
    name: 'DistributionGroup',
    options: {
		virtualHost: true
	},
    created(){
        // console.log(this.detailInfo)
    },
    data(){
        return {
           times: 14796681  // 12377481  14796681
        }
    },
    components:{ ECountdown, DistributionTandian},
    computed: {
        applyNeedObj(){
            const { id, exploreTimeStr,exploreTimeScope} = this.itemObj || {}
            return {
                id,
                exploreTimeStr,
                exploreTimeScope
            }
        }
    },
    props:{
        itemObj: {
			type: Object,
			default: () => {}
		},
        customStyle: {
			type: Object,
			default: () => {}
		},
        isExpire: {
			type: Number,
			default: 0 // 是否在有效期内 0-在;1-不在
		},

		detailInfo: {
			type: Object,
			default: () => {
				return {};
			}
		},

		productInfo: {
			type: Object,
			default: () => {
				return {};
			}
		},

		isTandianFull: {
			type: Boolean,
			default: false
		}
    },
    methods: {
       
    }
}
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.layout-group-content-item{
    .item-top{
        width: 100%;
    }
    .item-bottom{
        font-size: 12px;
        font-weight: bold;
        color: #333333;
        margin-top: 24rpx;
        image{
            width: 104rpx;
            height: 24rpx;
            display: inline-block;
            margin-right: 16rpx;
        }
    }
    &-left{
        position: relative;
        image{
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            overflow: hidden;
            display: inline-block;
            border: 1px solid #FFFFFF;
        }
        image:nth-child(2){
            position: absolute;
            right: 32rpx;
            top: 0;
        }
        .head-image-three,.head-image-three-other{
            background: #F5F5FC;
            width: 80rpx;
            height: 80rpx;
            top: 0;
            text-align: center;
            display: inline-flex;
            border-radius: 50%;
            position: relative;
            right: -16rpx;
            border: 1px solid #FFFFFF;
            image{
                width: 40rpx;
                height: 40rpx;
                border: none;
            }
        }
        .head-image-three-other{
            right: 32rpx;
        }
    }
    &-middle{
        margin-left: 38rpx;
        .text-one{
            font-size: 24rpx;
            color: #333333;
            text{
                color: $themeColor;
            }
        }
        .text-two{
            font-size: 20rpx;
            color: #999999;
        }
    }
    &-right{
        button{
            @include Db_newButton(60rpx,16rpx)
        }
    }
}
</style>